<template>
  <div class="wangEditor">
    <el-form :model="formModel"
             :rules="formRules"
             class="elForm"
             ref="formRef"
             label-width="60px"
             label-position="left"
             size="default">
      <el-form-item label="信息" prop="info">
        <WangEditor :modelValue="formModel.info" @handleChange="handleChange"></WangEditor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="addDisabled" @click="addEditor">添加（执行一次）</el-button>
        <el-button type="primary" @click="editEditor('form')">确认更改</el-button>
        <el-button @click="resetForm('form')">刷新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import WangEditor from "@/components/WangEditor";
import { onMounted, ref} from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {httpRequest} from "@/untils/httpRequest.ts";
import {ElMessage} from "element-plus";
import Cookies from "js-cookie";

let addDisabled = ref(true)
let formRef = ref(null)
let formModel = ref({
  info: ''
})
let formRules = ref({
  info: [{required: true, message: 'Input info', trigger: 'blur'}],
})
let currentEditor = ref({})

// 模拟 ajax 异步获取内容
onMounted(() => {
  getFirstEditor(true)
})
const handleChange = (html, editor) => {
  let getHtml = editor.getHtml()
  formModel.value.info = getHtml
}
const addEditor = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      return new Promise((resolve) => {
        let params = {
          html: formModel.value.info
        }
        httpRequest("post", "/editor/addEditor", null, params, "proxy").then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.msg)
            getFirstEditor()
            resolve();
          } else {
            ElMessage.error(res.data.msg)
          }
        });
      });
    } else {
      console.error('校验失败，失败项：', fields)
    }
  })
}
const getFirstEditor = (needTip) => {
  return new Promise((resolve) => {
    httpRequest("post", "/editor/getEditor", null, null, "proxy").then((res) => {
      if (res.data.code === 200) {
        currentEditor.value = res?.data?.data[0]
        formModel.value.info = currentEditor.value?.html || ''
        addDisabled.value = Boolean(currentEditor.value?.id)
        if (needTip) ElMessage.success(res.data.msg)
        resolve();
      } else {
        ElMessage.error(res.data.msg)
      }
    });
  });
}
const editEditor = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      return new Promise((resolve) => {
        let params = {
          id: currentEditor.value.id,
          html: formModel.value.info
        }
        httpRequest("post", "/editor/editEditor", null, params, "proxy").then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(res.data.msg)
            getFirstEditor()
            resolve();
          } else {
            ElMessage.error(res.data.msg)
          }
        });
      });
    } else {
      console.error('校验失败，失败项：', fields)
    }
  })
}
const resetForm = () => {
  getFirstEditor(true)
}

</script>

<style scoped lang="less">

</style>